<template>
    <div>


        <div class="col-xs-12">

            <div class="center">
				<span class="btn btn-app btn-sm btn-light no-hover">
					<span class="line-height-1 bigger-170 blue"> 1,411 </span>

					<br />
					<span class="line-height-1 smaller-90"> 点播数 </span>
				</span>

                <span class="btn btn-app btn-sm btn-yellow no-hover">
					<span class="line-height-1 bigger-170"> 3200 </span>

					<br />
					<span class="line-height-1 smaller-90"> 粉丝 </span>
				</span>

                <span class="btn btn-app btn-sm btn-pink no-hover">
					<span class="line-height-1 bigger-170"> 4 </span>

					<br />
					<span class="line-height-1 smaller-90"> 新增课程 </span>
				</span>

                <span class="btn btn-app btn-sm btn-grey no-hover">
					<span class="line-height-1 bigger-170"> 23 </span>

					<br />
					<span class="line-height-1 smaller-90"> 评论 </span>
				</span>

                <span class="btn btn-app btn-sm btn-success no-hover">
					<span class="line-height-1 bigger-170"> 7 </span>

					<br />
					<span class="line-height-1 smaller-90"> 专辑 </span>
				</span>

                <span class="btn btn-app btn-sm btn-primary no-hover">
					<span class="line-height-1 bigger-170"> 55 </span>

					<br />
					<span class="line-height-1 smaller-90"> 邮件 </span>
				</span>
            </div>

			<div class="space-12"></div>
			<div class="hr hr2 hr-double"></div>
			<div class="space-12"></div>

        </div>


		<div class="infobox-container">

			<div class="infobox infobox-green infobox-small infobox-dark">
				<div class="infobox-progress">
					<div class="easy-pie-chart percentage" data-percent="61" data-size="39">
						<span class="percent">61</span>%
					</div>
				</div>

				<div class="infobox-data">
					<div class="infobox-content">月指标</div>
					<div class="infobox-content">计划完成</div>
				</div>
			</div>

			<div class="infobox infobox-blue infobox-small infobox-dark">
				<div class="infobox-chart">
					<span class="sparkline" data-values="3,4,2,3,4,4,2,2"></span>
				</div>

				<div class="infobox-data">
					<div class="infobox-content">月收益</div>
					<div class="infobox-content">$32,000</div>
				</div>
			</div>

			<div class="infobox infobox-grey infobox-small infobox-dark">
				<div class="infobox-icon">
					<i class="ace-icon fa fa-download"></i>
				</div>

				<div class="infobox-data">
					<div class="infobox-content">下载量</div>
					<div class="infobox-content">1,205</div>
				</div>
			</div>

			<div class="space-6"></div>

			<div class="infobox infobox-green">
				<div class="infobox-icon">
					<i class="ace-icon fa fa-comments"></i>
				</div>

				<div class="infobox-data">
					<span class="infobox-data-number">32</span>
					<div class="infobox-content">comments + 2 reviews</div>
				</div>

				<div class="stat stat-success">8%</div>
			</div>

			<div class="infobox infobox-blue">
				<div class="infobox-icon">
					<i class="ace-icon fa fa-twitter"></i>
				</div>

				<div class="infobox-data">
					<span class="infobox-data-number">11</span>
					<div class="infobox-content">new followers</div>
				</div>

				<div class="badge badge-success">
					+32%
					<i class="ace-icon fa fa-arrow-up"></i>
				</div>
			</div>

			<div class="infobox infobox-pink">
				<div class="infobox-icon">
					<i class="ace-icon fa fa-shopping-cart"></i>
				</div>

				<div class="infobox-data">
					<span class="infobox-data-number">8</span>
					<div class="infobox-content">new orders</div>
				</div>
				<div class="stat stat-important">4%</div>
			</div>

			<div class="infobox infobox-red">
				<div class="infobox-icon">
					<i class="ace-icon fa fa-flask"></i>
				</div>

				<div class="infobox-data">
					<span class="infobox-data-number">7</span>
					<div class="infobox-content">experiments</div>
				</div>
			</div>

			<div class="infobox infobox-orange2">
				<div class="infobox-chart">
					<span class="sparkline" data-values="196,128,202,177,154,94,100,170,224"></span>
				</div>

				<div class="infobox-data">
					<span class="infobox-data-number">6,251</span>
					<div class="infobox-content">pageviews</div>
				</div>

				<div class="badge badge-success">
					7.2%
					<i class="ace-icon fa fa-arrow-up"></i>
				</div>
			</div>

			<div class="infobox infobox-blue2">
				<div class="infobox-progress">
					<div class="easy-pie-chart percentage" data-percent="42" data-size="46">
						<span class="percent">42</span>%
					</div>
				</div>

				<div class="infobox-data">
					<span class="infobox-text">traffic used</span>

					<div class="infobox-content">
						<span class="bigger-110">~</span>
						58GB remaining
					</div>
				</div>
			</div>

		</div>



		<div class="space-12"></div>
		<div class="hr hr2 hr-double"></div>
		<div class="space-12"></div>


		<div class="">
			<div class="widget-box transparent">
				<div class="widget-header widget-header-flat">
					<h4 class="widget-title lighter">
						<i class="ace-icon fa fa-signal"></i>
						销量
					</h4>
				</div>

				<div class="widget-body">
					<div class="widget-main padding-4">
						<div id="sales-charts"></div>
					</div><!-- /.widget-main -->
				</div><!-- /.widget-body -->
			</div><!-- /.widget-box -->
		</div><!-- /.col -->


		<div class="space-12"></div>
		<div class="hr hr2 hr-double"></div>
		<div class="space-12"></div>


		<div class="row">
			<div class="col-sm-6">
				<div class="widget-box transparent">
					<div class="widget-header widget-header-flat">
						<h4 class="widget-title lighter">
							<i class="ace-icon fa fa-star orange"></i>
							Popular Domains
						</h4>
					</div>

					<div class="widget-body">
						<div class="widget-main no-padding">
							<table class="table table-bordered table-striped">
								<thead class="thin-border-bottom">
								<tr>
									<th>
										<i class="ace-icon fa fa-caret-right blue"></i>name
									</th>

									<th>
										<i class="ace-icon fa fa-caret-right blue"></i>price
									</th>

									<th class="hidden-480">
										<i class="ace-icon fa fa-caret-right blue"></i>status
									</th>
								</tr>
								</thead>

								<tbody>
								<tr>
									<td>测试课程</td>

									<td>
										<small>
											<s class="red">$29.99</s>
										</small>
										<b class="green">$19.99</b>
									</td>

									<td class="hidden-480">
										<span class="label label-info arrowed-right arrowed-in">on sale</span>
									</td>
								</tr>

								<tr>
									<td>空气币</td>

									<td>
										<b class="blue">$16.45</b>
									</td>

									<td class="hidden-480">
										<span class="label label-success arrowed-in arrowed-in-right">approved</span>
									</td>
								</tr>

								<tr>
									<td>大数据</td>

									<td>
										<b class="blue">$15.00</b>
									</td>

									<td class="hidden-480">
										<span class="label label-danger arrowed">pending</span>
									</td>
								</tr>

								<tr>
									<td>网站开发</td>

									<td>
										<small>
											<s class="red">$24.99</s>
										</small>
										<b class="green">$19.95</b>
									</td>

									<td class="hidden-480">
																	<span class="label arrowed">
																		<s>out of stock</s>
																	</span>
									</td>
								</tr>

								<tr>
									<td>Docker</td>

									<td>
										<b class="blue">$12.00</b>
									</td>

									<td class="hidden-480">
										<span class="label label-warning arrowed arrowed-right">SOLD</span>
									</td>
								</tr>
								</tbody>
							</table>
						</div><!-- /.widget-main -->
					</div><!-- /.widget-body -->
				</div><!-- /.widget-box -->
			</div><!-- /.col -->

			<div class="col-sm-6">
				<div class="widget-box transparent">
					<div class="widget-header widget-header-flat">
						<h4 class="widget-title lighter">
							<i class="ace-icon fa fa-star orange"></i>
							Popular Domains
						</h4>
					</div>

					<div class="widget-body">
						<div class="widget-main">
							<div id="piechart-placeholder"></div>

							<div class="hr hr8 hr-double"></div>

							<div class="clearfix">
								<div class="grid3">
									<span class="grey">
										<i class="ace-icon fa fa-facebook-square fa-2x blue"></i>
										&nbsp; 喜欢
									</span>
									<h4 class="bigger pull-right">1,255</h4>
								</div>

								<div class="grid3">
									<span class="grey">
										<i class="ace-icon fa fa-twitter-square fa-2x purple"></i>
										&nbsp; 推荐
									</span>
									<h4 class="bigger pull-right">941</h4>
								</div>

								<div class="grid3">
									<span class="grey">
										<i class="ace-icon fa fa-pinterest-square fa-2x red"></i>
										&nbsp; 综合
									</span>
									<h4 class="bigger pull-right">1,050</h4>
								</div>
							</div>
						</div><!-- /.widget-main -->
					</div><!-- /.widget-body -->
				</div><!-- /.widget-box -->
			</div><!-- /.col -->
		</div><!-- /.row -->
	</div>
</template>

<script>
	/* eslint-disable */
	export default {
        name: "welcome",
        mounted: function() {
        	let _this = this;
            // sidebar激活样式方法一
            // this.$parent.activeSidebar("welcome-sidebar");

			_this.salesCharts();
			_this.showDrawPieChart();
        },
        methods: {

			showDrawPieChart: function () {
				let _this = this;
				let placeholder = $('#piechart-placeholder').css({'width':'90%' , 'min-height':'150px'});
				let data = [
					{ label: "social networks",  data: 38.7, color: "#68BC31"},
					{ label: "search engines",  data: 24.5, color: "#2091CF"},
					{ label: "ad campaigns",  data: 8.2, color: "#AF4E96"},
					{ label: "direct traffic",  data: 18.6, color: "#DA5430"},
					{ label: "other",  data: 10, color: "#FEE074"}
				]
				_this.drawPieChart(placeholder, data);
			},

			drawPieChart: function (placeholder, data, position) {
				$.plot(placeholder, data, {
					series: {
						pie: {
							show: true,
							tilt:0.8,
							highlight: {
								opacity: 0.25
							},
							stroke: {
								color: '#fff',
								width: 2
							},
							startAngle: 2
						}
					},
					legend: {
						show: true,
						position: position || "ne",
						labelBoxBorderColor: null,
						margin:[-30,15]
					},
					grid: {
						hoverable: true,
						clickable: true
					}
				})
			},

			salesCharts: function () {
				let i;
				let d1 = [];
				for (i = 0; i < Math.PI * 2; i += 0.5) {
					d1.push([i, Math.sin(i)]);
				}

				let d2 = [];
				for (i = 0; i < Math.PI * 2; i += 0.5) {
					d2.push([i, Math.cos(i)]);
				}

				let d3 = [];
				for (i = 0; i < Math.PI * 2; i += 0.4) {
					d3.push([i, Math.sign(i)]);
				}

				let sales_charts = $('#sales-charts').css({'width':'100%' , 'height':'220px'});
				$.plot("#sales-charts", [
					{ label: "最近30天", data: d1 },
					{ label: "上一周期", data: d2 },
					{ label: "服务类型", data: d3 }
				], {
					hoverable: true,
					shadowSize: 0,
					series: {
						lines: { show: true },
						points: { show: true }
					},
					xaxis: {
						tickLength: 0
					},
					yaxis: {
						ticks: 10,
						min: -2,
						max: 2,
						tickDecimals: 3
					},
					grid: {
						backgroundColor: { colors: [ "#fff", "#fff" ] },
						borderWidth: 1,
						borderColor:'#555'
					}
				});

			},
        }
    }
</script>